<template>
    <div>
        <span>科目</span>
        <el-table :data="subjectData" style="width: 100%; margin-bottom: 20px" :row-key="subjectData.accountTypeId"
            :border="true" default-expand-all @row-click="" :stripe="true" :highlight-current-row="true"
            empty-text="好像没有数据哎😔" :scrollbar-always-on="true">

            <el-table-column type="selection" width="55" />
            <el-table-column type="index" width="50" />
            <el-table-column prop="accountTypeName" label="科目名称" width="150" />
            <el-table-column prop="createOperationRecordTime" label="添加时间" width="200" />
            <el-table-column prop="createUserName" label="添加人" width="100" />
            <el-table-column prop="createOperationRecordRemarks" label="添加备注" width="150" />
            <el-table-column prop="updateOperationRecordTime" label="最近修改时间" width="200" />
            <el-table-column prop="updateUserName" label="修改人" width="100" />
            <el-table-column prop="updateOperationRecordRemarks" label="修改备注" width="150" />
            <el-table-column width="135" align="center" label="操作" fixed="right">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">修改
                    </el-button>
                    
                            <el-button size="small" type="danger" @click="handleDel(scope.row)">删除</el-button>
                       
                </template>
            </el-table-column>
        </el-table>
        <DialogQuestionBank :openShow="updateShow" :modelValue="ChildrenSubjectData" @backData="backData" @isUpdate="isUpdate">
        </DialogQuestionBank>
    </div>

</template>

<script>
import { reactive, ref } from '@vue/reactivity'
import { computed, watch } from '@vue/runtime-core'
import DialogQuestionBank from './DialogQuestionBank.vue'
import ButtonTemplateSx from './TemplateContent/ButtonTemplateSx.vue'
import { ElMessage, ElMessageBox ,ElNotification} from 'element-plus'
import axios from 'axios';
import { useStore } from 'vuex'
export default {
  components: { DialogQuestionBank, ButtonTemplateSx },
    props: ['modelValue'],
    emits: ['backData','isUpdateData'],
    setup(props,{emit}){
        const store = new useStore()
        let value = ref(0)
        let updateShow = ref(false)
        //数据聚集地
        const data = reactive({
            parentData:null,
            childrenData:null,
        })
        //父子组件传值交接
        data.parentData = props.modelValue
       
        
        //监听父组件数据更新子组件数据
        watch(() => props.modelValue, function (newVal, oldVal) {
            //console.log("sfsfsdfsddddddddddddddddddddddddddddddddddddd")
            //console.log(newVal)
            data.parentData = newVal
        }, {
            deep: true,
            immediate: false
        })
        


        //组件数据计算属性
        const subjectData = computed(()=>{
            return data.parentData
        })
        const ChildrenSubjectData = computed(()=>{
            return data.childrenData
        })
       
        //事件回调函数
        //修改操作
        function handleEdit(a){
            data.childrenData = a
            updateShow.value = true;
        }
        //删除操作
        function handleDel(a) {
            ElMessageBox.confirm(
                '确认是否删除?',
                '请确认',
                {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {//确认回调函数
                
                    axios.get("/api/accountType/selectAccountTypeNumberOfSubjectAndTestPaper",{
                        params:{
                            accountTypeId:a.accountTypeId
                        }
                    }).then((response)=>{
                        if(response.status == 200){
                            if(response.data.code == 200){
                                    store.commit('insertData',response.data.data)
                                    emit('isUpdateData',true)
                                    ElNotification({
                                        title: '操作成功',
                                        message: '成功删除' + a.accountTypeName + '科目',
                                        type: 'success',
                                    })
                                    //console.log(store.state.subjectData)
                                    return
                            }else{
                                ElNotification({
                                    title: '操作失败',
                                    message: '操作异常',
                                    type: 'warning',
                                }) 
                                return;
                            }
                        }else{
                            ElNotification({
                                title: '操作失败',
                                message: '未知失败',
                                type: 'error',
                            })
                            return ;
                        }
                       
                    })
                    
                })
                .catch(() => {//取消回调函数
                    ElMessage({
                        type: 'info',
                        message: '已取消操作',
                    })
                })
        }
        function backData(a){
            updateShow.value = a
        }
        //是否需要更新数据源
        function isUpdate(a){
            if(a){
                emit('isUpdateData',true)
            }else{
                emit('isUpdateData',false)
            }
        }

        return {
            subjectData,
            updateShow,
            handleEdit,
            ChildrenSubjectData,
            backData,
            handleDel,
            value,
            isUpdate
        }
    }
}
</script>

<style>

</style>